<script setup>
// 获取屏幕缩放比例
import { inject, onMounted, ref } from 'vue'
import themeSwitch from '@/components/theme-switch.vue'
import Logo from "@/components/svg/logo.vue";
import LogoMin from "@/components/svg/logo-min.vue";
import MpcLogoMin from "@/components/svg/mpc-logo-min.vue";

const props = defineProps({
  isHome: {
    type: Boolean,
    default: false
  }
})

const ibm = localStorage.getItem("isBlackMode");
// 是否开启黑暗模式
let isBlackMode = inject('isBlackMode');
if (ibm !== null) {
  isBlackMode.value = ibm === "true";
}

// 是否竖屏
let isVerticalScreen = inject("isVerticalScreen");

// 是否显示 showHeader
const showHeader = ref(false);
// 是否顶部
const isTop = inject('isTop')

function blackMode() {
  isBlackMode.value = !isBlackMode.value;
  onscroll(null);
  // 保存缓存
  localStorage.setItem("isBlackMode", String(isBlackMode.value));
}

onMounted(()=>{
})

function onscroll(ev) {
  const toTopNum = document.documentElement.scrollTop;
  if (toTopNum === 0) {
    showHeader.value = false;
    // document.getElementById('header').classList.remove("fuzzy");
    // document.getElementById('header').classList.remove("fuz_black");
    isTop.value = true;
  } else if (toTopNum > 1) {
    showHeader.value = true;
    // document.getElementById('header').classList.remove(isBlackMode.value?"fuzzy":"fuz_black");
    // document.getElementById('header').classList.add(isBlackMode.value?"fuz_black":"fuzzy");
    if (toTopNum > 600) {
      isTop.value = false;
    }
  }
}

document.body.onscroll = onscroll;
</script>
<template>
  <div id="header" class="header 1" :class="showHeader?(isBlackMode?'fuz_black':'fuzzy'):''" :style="{'width': isVerticalScreen?'100%':'80%', 'padding': isVerticalScreen?'0':'0 10%'}">
    <a v-if="showHeader" :class="!isBlackMode?'tag-right':'tag-right-black'" :style="{'width': isVerticalScreen?'60px':'170px'}" href="/" style="float: left; height: 100%; user-select: none; transition: inherit;">
      <logo-min style="width: 60px; height: 100%; float: left; transform: scale(0.5)"></logo-min>
      <div v-show="!isVerticalScreen" style="float: left; width: 110px; line-height: 60px; text-align: left; font-size: 18px;">红珊瑚</div>
    </a>
    <a v-show="!isHome&&isVerticalScreen" style="float: left; width: 80px; line-height: 60px; text-align: center; font-size: 16px;">首页</a>
    <theme-switch id="check" class="tag-right" style="margin: 19px 10px 19px 0" @change="blackMode()" :isBlackMode="isBlackMode"></theme-switch>
    <div :class="!isBlackMode?'tag-split-line':'tag-split-line-black'"></div>
    <a :class="!isBlackMode?'tag-right':'tag-right-black'" href="https://www.red-coral.cn/message-plus" target="_blank">
      <logo-min class="a_img" style="width: 30px"></logo-min>
    </a>
    <a :class="!isBlackMode?'tag-right':'tag-right-black'" href="https://www.red-coral.cn/message-plus-core" target="_blank">
      <mpc-logo-min class="a_img" style="width: 30px"></mpc-logo-min>
    </a>
  </div>
</template>
<style scoped>
.header {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}

.fuzzy {
  background-color: rgba(240,240,248,0.8);
  backdrop-filter: blur(20px);
  transition: all 0.2s ease-out;
  box-shadow: 0 0 1px 0 rgba(100,100,100,1);
}

.fuz_black {
  background-color: rgba(60,60,60,0.5) !important;
  backdrop-filter: blur(20px);
  transition: all 0.2s ease-out;
  box-shadow: 0 0 1px 0 rgba(220,220,220,1) !important;
}

.tag-right {
  float: right;
  min-width: 40px;
  line-height: 60px;
  height: 100%;
  margin: 0 10px 0 0;
  transition: all 0.2s ease-out;
  color: rgb(60,60,60);
}
.tag-right:hover {
  color: #79bbff;
}

.tag-right .a_img {
  height: 30px;
  margin: 15px 0;
  border-radius: 20px;
  transition: inherit;
}
.tag-right .a_img:hover {
  height: 30px;
  margin: 15px 0;
  filter: brightness(0.8);
  background-color: rgba(230,230,230,1);
  box-shadow: 0 0 8px 0 rgba(100,100,100,1);
}

.tag-right-black {
  float: right;
  min-width: 40px;
  line-height: 60px;
  height: 100%;
  margin: 0 10px 0 0;
  transition: all 0.2s ease-out;
  color: rgb(250,250,250);
}
.tag-right-black:hover {
  color: #79bbff;
}

.tag-right-black .a_img {
  height: 30px;
  margin: 15px 0;
  border-radius: 20px;
  transition: inherit;
}
.tag-right-black .a_img:hover {
  height: 30px;
  margin: 15px 0;
  border-radius: 20px;
  filter: brightness(1.2);
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0 0 8px 0 rgba(255,255,255,1);
}

.header .tag-split-line {
  float: right;
  width: 0;
  height: 30px;
  margin: 15px 15px 15px 0;
  box-shadow: 0 0 0.8px 0.4px rgba(100,100,100,1);
}

.header .tag-split-line-black {
  float: right;
  width: 0;
  height: 30px;
  margin: 15px 15px 15px 0;
  box-shadow: 0 0 0.8px 0.4px rgba(200,200,200,1);
}

</style>
